import { useState } from 'react';
import { getData5 } from '../Data'
import { useMount, useReactive } from 'ahooks';


import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid';


import { CollectionView, PropertyGroupDescription } from "@grapecity/wijmo";


const WijmoI02 = () => {
    const InitData = useReactive({
        init: null
    })

    const [Data, setData] = useState()
    useMount(() => {
        setData(new CollectionView(getData5(100), { groupDescriptions: [new PropertyGroupDescription('上聚合数据', () => '')] }))
        // setData(new CollectionView(getData5(100), { groupDescriptions: [new PropertyGroupDescription('上聚合数据', () => ''), 'country'] }))
    })

    const init = (init) => {
        InitData.init = init
    }

    if (Data) {
        return (
            <div className="Page">
                <FlexGrid frozenRows={1} initialized={init} itemsSource={Data}>
                    <FlexGridColumn binding="id" header="ID" width={60} isReadOnly={true} />
                    <FlexGridColumn binding="country" header="Country" />
                    <FlexGridColumn binding="product" header="Product" />
                    <FlexGridColumn binding="sales" header="Sales" aggregate="Sum" />
                    <FlexGridColumn binding="expenses" header="Expenses" aggregate="Sum" />
                </FlexGrid>
                <div>将需要聚合的列上设置 aggregate : Sum</div>
            </div>
        )
    }
}

export default WijmoI02